<template>
  <button class="btn gap-2" :disabled="loadingThrottled">
    <slot v-if="!loadingThrottled" name="icon" />
    <span v-else class="loading loading-spinner"></span>
    <slot></slot>
  </button>
</template>
<script setup lang="ts">
import { refThrottled } from "@vueuse/core";

interface Props {
  loading?: boolean;
}

const props = defineProps<Props>();

const loadingThrottled = refThrottled(
  toRef(() => props.loading),
  500,
);
</script>
